<template>
    <m-simple-card :is-padding="false">
        <swiper
            circular
            :indicator-dots="indicatorDots"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
            class="m-swiper"
        >
            <swiper-item v-for="item in items">
                <image :src="item.imageUrl" @click="goto(item.imageUrl)" class="m-swiper-img" mode="scaleToFill" />
            </swiper-item>
        </swiper>
    </m-simple-card>
</template>
<script lang="ts" setup>
import MSimpleCard from '@/components/common/MSimpleCard.vue'
const props = defineProps({
    items: { type: Array<PageItem>, default: [] },
    indicatorDots: { type: Boolean, default: true },
    autoplay: { type: Boolean, default: true },
    interval: { type: Number, default: 3000 },
    duration: { type: Number, default: 500 }
})
function goto(params: string) {}
</script>
<style lang="scss" scoped>
$m-swiper-height: 800rpx;
.m-swiper {
    height: $m-swiper-height;
    .m-swiper-img {
        width: 100%;
        height: $m-swiper-height;
    }
}
</style>
